<template>
  <el-container class="container">
    <el-aside :width="isCollapse?'64px':'200px'" class="left" style="transition: width 0s">
      <h3 :class="hClass" v-text="isCollapse?'菜单':'4S店后台管理系统'"></h3>
      <el-scrollbar>
        <el-menu :unique-opened="true" @open="handleOpen" :router="startRouter" @close="handleClose"
          @select="selectMenu" :default-active="path" class="el-menu-vertical-demo" background-color="#545c64"
          text-color="#FFFFFF" active-text-color="#ffd04b" :collapse="isCollapse">
          <div v-for="item in menuList" :key="item.url">
            <template v-if="item.nodes && item.nodes.length == 0">
              <el-menu-item :index="item.url">
                <i class="el-icon-menu"></i>
                <el-menu-item>{{item.name}}</el-menu-item>
              </el-menu-item>
            </template>

            <el-submenu :index="item.url">
              <template slot="title" :class="hClass">
                <i :class="item.icon==''?'el-icon-location':item.icon"></i>
                <span slot="title" v-if="!isCollapse">{{item.name}}</span>
              </template>

              <template v-for="child in item.nodes">
                <!-- 这里是类似递归循环 -->
                <sidebar-item v-if="child.nodes&&child.nodes.length>0" :item="child" :key="child.url" />
                <el-menu-item v-else :key="child.url" :index="child.url">
                  <i :class="child.icon?'el-icon-location':child.icon"></i>
                  <span>{{child.name}}</span>
                </el-menu-item>
              </template>
            </el-submenu>
          </div>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-main class="right main">
      <el-header>
        <el-button type="text" :icon="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" style="font-size: 28px;"
          @click="collapse"></el-button>
        <div style="display: inline-block;float: right;">
          <span style="font-size: 1rem; color: #FFFFFF; margin-right: 0.9375rem;"> 欢迎你 : {{this.sysName}} </span>
          <el-dropdown>
            <el-button type="text" style="padding: 0.6em; font-size: 1.15em;color: #FFFFFF;">
              设置<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" style="text-align: center;">
              <el-dropdown-item>
                <div @click="xgmm">修改密码</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="logout" style="padding: 0px 30px;">注销</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <!-- 修改密码框 -->
      <el-dialog title="修改密码" :visible.sync="dialogVisible" width="450px">
        <el-form :model="ruleForm" :rules="rules" ref="rle" label-width="90px">
          <el-form-item label="旧密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off" style="width: 92%;"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="pass2">
            <el-input type="password" v-model="ruleForm.pass2" autocomplete="off" style="width: 92%;"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" style="width: 92%;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="qx">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </div>
      </el-dialog>
      <!-- 工作区 -->
      <el-main>
        <router-view class="box"></router-view>
      </el-main>
      <!-- 底部 -->
<!--      <el-footer style="text-align: center;color: #FFFFFF;">
        <div>
          <a href="#" style="color: #FFF0F5; text-decoration:none"> 2019级分层班</a>
        </div>
      </el-footer> -->
    </el-main>
  </el-container>

</template>

<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入旧密码'));
        } else {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入的新密码'));
        } else {
          callback();
        }
      };
      var validatePass3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请确认你输入的新密码'));
        } else if (value !== this.ruleForm.pass2) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        dialogVisible: false, //修改密码对话框是非开启
        isCollapse: false,
        hClass: 'hClass',
        sysName: '',
        role: '',
        startRouter: true, //开启路由标识， ，启用该模式会在激活导航时以 index 作为 url 进行路由跳转
        currentIndexLight: '', //当前激活菜单的 index  高亮显示
        arrIndex: [],
        menuList: [],
        roles: [],
        rules: { //修改密码效验
          pass: [{
            validator: validatePass,
            trigger: 'blur'
          }],
          pass2: [{
            validator: validatePass2,
            trigger: 'blur'
          }],
          checkPass: [{
            validator: validatePass3,
            trigger: 'blur'
          }],
        },
        ruleForm: { //修改密码的表单
          pass: '',
          checkPass: '',
          pass2: ''
        },

      }
    },
    methods: {



      //控制左侧表单缩放
      collapse() {
        this.isCollapse = !this.isCollapse;
      },
      logout() {
        this.$confirm('确定要注销嘛？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.$ajax.post('logout', {}).then(res => {
            var result = res.data;
            if (result.success) {
              window.sessionStorage.removeItem("token");
              window.sessionStorage.removeItem("name");
              window.sessionStorage.removeItem('role');
              sessionStorage.removeItem("path");

              this.$router.replace('/');
            }
          })
        })
      },
      //修改密码
      qx() {
        this.ruleForm = {}
        this.dialogVisible = false
      },
      xgmm() {
        this.dialogVisible = true
      },
      submitForm(ruleForm) {
        this.$refs.rle.validate(valid => {
          if (valid) {
            this.$ajax.post('pwd/setPwd', this.ruleForm).then(res => {
              var result = res.data;
              if (result.success) {
                this.dialogVisible = false;
                this.$notify({
                  title: '提示',
                  message: '密码修改成功',
                  position: 'bottom-right'
                });
                this.$ajax.post('logout', {}).then(res => {
                  var result = res.data;
                  if (result.success) {
                    window.sessionStorage.removeItem("token");
                    window.sessionStorage.removeItem("name");
                    this.$router.replace('/');
                  }
                })
              } else {
                this.$message({
                  message: result.msg,
                  type: 'warning'
                });
              }
            })
          }
        })
      },
      aaa(value) {
        var bool = false
        this.roles.forEach(item => {
          if (item === value) {
            bool = true
          }
        })
        return bool
      },
      bbb(value) {
        var bool = false
        this.roles.forEach(item => {
          if (value === item) {
            bool = true
          }
        })
        return bool
      },
      selectMenu(index) {
        this.path = index;
        sessionStorage.setItem("path", index);
      },
      // 展开指定的 sub-menu
      handleOpen(key, keyurl) {
      },

      //    收起指定的 sub-menu
      handleClose(key, keyurl) {
      },
      getMenuList() {
        this.$ajax.post('menu/findbyuser', {}).then(res => {
          this.menuList = res.data;
        })
        // this.$ajax.post("menu/combotree",{}).then(res=>{
        //   this.menuList=res.data
        // })
      }
    },
    created() {
      this.sysName = window.sessionStorage.getItem("name");
      this.role = window.sessionStorage.getItem('role')
      // console.log(this.role);
      if (this.role === null) {
        this.$message({
          message: '您还没登录呢，请先登录！',
          type: 'warning'
        });
        this.$router.replace('/');
      }else{
        var roles = this.role.split(',')
        this.roles = roles
        this.getMenuList()

      }
    },

    computed: {
      path() {
        var path = sessionStorage.getItem("path");
        var path1 = sessionStorage.getItem("role");
        if(path1=='ROLE_ADMIN'&&path==null){
          sessionStorage.setItem("path", '/shouYe');
          this.$router.replace('/shouYe');
          return path ='/shouYe'
        }
        return path ? path : ''
      }
    },

  }
</script>

<style scoped>
  .container {
    min-height: 100vh;
  }

  .left {
    background-color: #333333;
  }

  .left>h3 {
    margin-block-start: 0.94em;
    margin-block-end: 0.94em;
  }

  .hClass {
    padding-left: 1.25rem;
    color: #FFFFFF;
    font-weight: 550;
    max-height: 1.5625rem;
    word-break: keep-all;
    /* 不换行 */
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 内容超出宽度时隐藏超出部分的内容 */
  }

  .right {
    min-height: 100vh;
    background-color: #FFFFFF;
    display: flex;
    padding: 0;
    flex-direction: column;
  }

  .el-menu {
    border-right: 0;
    max-height: calc(100vh - 60px);
    min-height: calc(94vh - 6px);
  }

  .el-header,
  .el-footer {
    background-color: #333333;
    line-height: 60px;
    flex-grow: 0;
  }

  .main2 {
    min-height: calc(100% - 5px);
  }

  element.style {
    height: 60px;
    width: 60px;
  }

  .box {
    max-height: calc(100vh - 120px);
  }

  .el-main {
    background-color: #f8f9fa;
    max-height: calc(100vh - 60px);
  }
</style>
